<!-- 环境质量监测 -->
<template>
  <div>
    <Card :bordered="false">
      <p slot="title">
        环境质量及监测
      </p>
      <Form ref="form" :rules="rules" :model="info">
        <table width='100%' border="1" cellspacing="0" cellpadding="0" ref="print" class="styleInput">
          <tr>
            <th colspan="5">
              环境质量及监测情况表
            </th>
          </tr>
          <tr>
            <td colspan="2">
              项目编号
            </td>
            <td colspan="3" class='sizeStyle'>
              {{info.ProjectNumber}}
            </td>
          </tr>
          <tr>
            <td width="60" rowspan="5">
              环境质量现状
            </td>
            <td>
              <Icon type="ios-medical" color="#ff6868" />
              引用数据
            </td>
            <td>
              <FormItem prop="QuoteData">
                <RadioGroup v-model="info.QuoteData" @on-change='changeQuote'>
                  <Radio label="是" :disabled='viewOnly'>
                    <span>是</span>
                  </Radio>
                  <Radio label="否" :disabled='viewOnly'>
                    <span>否</span>
                  </Radio>
                </RadioGroup>
              </FormItem>
            </td>
            <td>
              <Icon type="ios-medical" color="#ff6868" />
              实际监测
            </td>
            <td>
              <FormItem prop="ActualMonitor">
                <RadioGroup v-model="info.ActualMonitor" @on-change='changeActual'>
                  <Radio label="是" :disabled='viewOnly'>
                    <span>是</span>
                  </Radio>
                  <Radio label="否" :disabled='viewOnly'>
                    <span>否</span>
                  </Radio>
                </RadioGroup>
              </FormItem>
            </td>
          </tr>
          <tr>
            <td>
              <!-- <Icon type="ios-medical" color="#ff6868" /> -->
              <Tooltip placement="right" content="请填写引用的数据来源">
                数据来源
              </Tooltip>
            </td>
            <td>
              <Input v-model="info.QuoteDataSource" :disabled='isDisabled'></Input>
              <!-- <RadioGroup v-model="info.Quote_data_source">
                <Radio label="apple" :disabled='isDisabled'>
                  <span>是</span>
                </Radio>
                <Radio label="android" :disabled='isDisabled'>
                  <span>否</span>
                </Radio>
              </RadioGroup> -->
            </td>
            <td>
              <!-- <Icon type="ios-medical" color="#ff6868" /> -->
              监测方案
            </td>
            <td>
              <!-- <FormItem prop="Monitor_plan"> -->
                <Col span="12"><UploadFile v-model="info.MonitorPlan" :isDisabled='isDisabledActualMonitor' :upName="upInfo.MonitorPlan" UploadFileName="MonitorPlan" :UploadFileId="$route.query.ProjectId" /></Col>
                <Col span="12"><DownloadButton v-if="viewOnly" :downData="downloadInfo.MonitorPlan"></DownloadButton></Col>
              <!-- </FormItem> -->
            </td>
          </tr>
          <tr>
            <td>
              <!-- <Icon type="ios-medical" color="#ff6868" /> -->
              引用项
            </td>
            <td>
                <CheckboxGroup v-model="QuoteItem">
                  <Checkbox label="1" :disabled='isDisabled'>地表水</Checkbox>
                  <Checkbox label="2" :disabled='isDisabled'>大气</Checkbox>
                  <Checkbox label="3" :disabled='isDisabled'>噪声</Checkbox>
                  <Checkbox label="4" :disabled='isDisabled'>地下水</Checkbox>
                </CheckboxGroup>
              <br>
              <span style="font-size:12px;color:#666">(可多选)</span>
              <!-- {{Quote_item}} -->
            </td>
            <td>
              <!-- <Icon type="ios-medical" color="#ff6868" /> -->
              检测项
            </td>
            <td>
              <CheckboxGroup v-model="TestItem">
                <Checkbox label="1" :disabled='isDisabledActualMonitor'>地表水
                </Checkbox>
                <Checkbox label="2" :disabled='isDisabledActualMonitor'>大气
                </Checkbox>
                <Checkbox label="3" :disabled='isDisabledActualMonitor'>噪声
                </Checkbox>
                <Checkbox label="4" :disabled='isDisabledActualMonitor'>地下水
                </Checkbox>
              </CheckboxGroup>
              <br>
              <span style="font-size:12px;color:#666">(可多选)</span>
              <!-- {{Test_item}} -->
            </td>
          </tr>
          <tr>
            <td>
              <!-- <Icon type="ios-medical" color="#ff6868" /> -->
              引用报告
            </td>
            <td style="padding:10px">
              <!-- <FormItem prop="Quote_report"> -->
                <Col span="12"><UploadFile v-model="info.QuoteReport" :isDisabled='isDisabled' :upName="upInfo.QuoteReport" UploadFileName="QuoteReport" :UploadFileId="$route.query.ProjectId"/></Col>
                <Col span="12"><DownloadButton v-if="viewOnly" :downData="downloadInfo.QuoteReport"></DownloadButton></Col>
              <!-- </FormItem> -->
              <br><br>
              <p style="font-size:12px;color:#666">上传文件格式为docx、doc、PDF、图
              片、压缩文件</p>
            </td>
            <td>
              <!-- <Icon type="ios-medical" color="#ff6868" /> -->
              检测报告
            </td>
            <td style="padding:10px">
              <!-- <FormItem prop="Actual_test_report"> -->
                <Col span="12"><UploadFile v-model="info.ActualTestReport" :isDisabled='isDisabledActualMonitor' :upName="upInfo.ActualTestReport" UploadFileName="ActualTestReport" :UploadFileId="$route.query.ProjectId"/></Col>
                <Col span="12"><DownloadButton v-if="viewOnly" :downData="downloadInfo.ActualTestReport"></DownloadButton></Col>
              <!-- </FormItem> -->
              <br><br>
              <p style="font-size:12px;color:#666">上传文件格式为docx、doc、PDF、图
                片、压缩文件</p>
            </td>
          </tr>
          <tr>
            <td>
              <!-- <Icon type="ios-medical" color="#ff6868" /> -->
              监测点位示意图
            </td>
            <td style="padding:10px">
              <!-- <FormItem prop="Monitor_point_map"> -->
                <Col span="12"><UploadFile v-model="info.MonitorPointMap" :isDisabled='isDisabled' :upName="upInfo.MonitorPointMap" UploadFileName="MonitorPointMap" :UploadFileId="$route.query.ProjectId"/></Col>
                <Col span="12"><DownloadButton v-if="viewOnly" :downData="downloadInfo.MonitorPointMap"></DownloadButton></Col>
              <!-- </FormItem> -->
              <br><br>
              <p style="font-size:12px;color:#666">上传图片格式为JPEG、JPG、PNG</p>
              <!-- <Alert closable type="success" show-icon>某某某.jpg</Alert> -->
            </td>
            <td>
              <!-- <Icon type="ios-medical" color="#ff6868" /> -->
              监测布点图
            </td>
            <td style="padding:10px">
              <!-- <FormItem prop="Actual_monitor_point_map"> -->
                <Col span="12">
                <UploadFile v-model="info.ActualMonitorPointMap" :isDisabled='isDisabledActualMonitor' :upName="upInfo.ActualMonitorPointMap" UploadFileName="ActualMonitorPointMap" :UploadFileId="$route.query.ProjectId"/>
                </Col>
                <Col span="12">
                <DownloadButton v-if="viewOnly" :downData="downloadInfo.ActualMonitorPointMap"></DownloadButton>
                </Col>
              <!-- </FormItem> -->
              <br><br>
              <p style="font-size:12px;color:#666">上传图片格式为JPEG、JPG、PNG</p>
              <!-- <Alert closable type="success" show-icon>某某某.jpg</Alert> -->
            </td>
          </tr>
        </table>
      </Form>
      <Row style="padding:20px 0">
        <Col span="12" style="text">
        <PrintButton v-if="flag" Url="print/printMonitor" :Project_id="info.Id"></PrintButton>
        </Col>
        <Col span="12" style="text-align: right">
        <Button type="primary" @click="submit('save')" :disabled='viewOnly'>
          保存
        </Button>
        <Button type="primary" @click="submit('submit')" :disabled='viewOnly'>
          提交
        </Button>
        </Col>
      </Row>
      <StepBar :status="3" :viewOnly='viewOnly'/>
    </Card>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        viewOnly: false,  // 允许查看
        viewTwo: true,
        upInfo: {
          MonitorPlan: "",
          QuoteReport: "",
          ActualTestReport: "",
          MonitorPointMap: "",
          ActualMonitorPointMap: ""
        },
        downloadInfo: {},
        isDisabled: false,
        isDisabledActualMonitor: false,
        QuoteItem: [],
        TestItem: [],
        flag: false,
        info: {
          QuoteData: '',
          ActualMonitor: '',
          QuoteDataSource: '',
          
        },
        setButton: 0,
        rules: {
          QuoteData: {
            required: true,
            trigger: 'change',
            message: '引用数据选项不能为空',
          },
          ActualMonitor: {
            required: true,
            trigger: 'change',
            message: '实际监测选项不能为空',
          },
          // Quote_data_source: {
          //   required: true,
          //   trigger: 'change',
          //   message: '数据来源选项能为空',
          // },
          // Monitor_plan: {
          //   required: true,
          //   message: '监测方案不能为空',
          //   trigger: 'blur'
          // },
          // Quote_report: {
          //   required: true,
          //   trigger: 'change',
          //   message: '引用数据选项不能为空',
          // },
          // Actual_test_report: {
          //   required: true,
          //   trigger: 'change',
          //   message: '引用数据选项不能为空',
          // },
          // Monitor_point_map: {
          //   required: true,
          //   trigger: 'change',
          //   message: '引用数据选项不能为空',
          // },
          // Actual_monitor_point_map: {
          //   required: true,
          //   trigger: 'change',
          //   message: '引用数据选项不能为空',
          // },
        },
        updatedInfo: 0,
      }
    },
    created() {
      //判断是否有ID
      if (this.$route.query.ProjectId && this.$route.query.ProjectId != '') {
        this.getProject(this.$route.query.ProjectId)
        if(this.$route.query.viewOnly==1 || localStorage.getItem('userOrg') ==7) {
          this.viewOnly = true
        }
      } else {
        //跳转首页
        this.$router.push({
          name: "index"
        })
      }
    },
    mounted() {
      if(this.$route.query.viewOnly == 1){
        this.isDisabledActualMonitor = true
        this.isDisabled = true
      }
    },
    watch: {
      'info.QuoteData'(val) {
        if(this.$route.query.viewOnly != 1){
          this.changeQuote(val)
        }
      },
      'info.ActualMonitor'(val) {
        if(this.$route.query.viewOnly != 1){
          this.changeActual(val)
        }
      }
    },
    methods: {
      // 引用数据
      changeQuote(val) {
        console.log(val)
        if(val == '否') {
          if(this.info.ActualMonitor == '否') {
            console.log(this.info.ActualMonitor)
            this.$Modal.warning({
              title: "提示信息",
              content: "引用数据与实际监测不能同时为否！"
            });
            this.info.ActualMonitor = '是'
            this.isDisabledActualMonitor = false
          }
          this.isDisabled = true
        }else {
          this.isDisabled = false
        }
      },
      //  实际监测
      changeActual(val) {
        if(val == '否') {
          if(this.info.QuoteData == '否') {
            this.$Modal.warning({
              title: "提示信息",
              content: "引用数据与实际监测不能同时为否！"
            });
            this.info.QuoteData = '是'
            this.isDisabled = false
          }
          this.isDisabledActualMonitor = true
        }else {
          this.isDisabledActualMonitor = false
        }
      },
      // 保存 save / 提交 submit
      submit(type) {
        // 验证
        if(type == 'save'){
          if(this.setButton == 0){
            this.$refs.form.validate((valid) => {
              if (!valid) {
                return
              }
              this.setButton = 1
              setTimeout(()=>{this.setButton = 0},60000)
              let info = this.info
              info.BtnWay = type == 'save' ? 1 : 2
              info.PerjectType = type == 'save' ? 4 : 4
              // if(info.Test_item==null) {
              //   info.Test_item = []
              // }
              // if(info.Quote_item==null) {
              //   info.Test_item = []
              // }
              // info.Test_item = JSON.stringify(info.Test_item)
              // info.Quote_item = JSON.stringify(info.Quote_item)
              info.QuoteItem = this.QuoteItem
              info.TestItem = this.TestItem
              console.log(info.QuoteItem)
              axios.post('/projectInformation/saveOrUpdateProject', info).then((res) => {
                if (res._STATUS == 1) {
                  let title = res._MESSAGE
                  if (type == 'save') {
                    this.$Modal.success({
                      title,
                    })
                  } else {
                    this.$router.push({
                      name: "reportReview",
                      query: {
                        ProjectId: this.$route.query.ProjectId,
                      }
                    })
                  }
                } else {
                  this.$Modal.error({
                    title:res._MESSAGE
                  })
                }
              })
            })
          }else{
            this.$Message.warning('连续点击保存时间过短，最少间隔1分钟!')
          }
        }else{
          if(this.updatedInfo == 0){
            this.$refs.form.validate((valid) => {
              if (!valid) {
                return
              }
              this.updatedInfo = 1
              setTimeout(()=>{this.updatedInfo = 0},60000)
              let info = this.info
              info.BtnWay = type == 'save' ? 1 : 2
              info.PerjectType = type == 'save' ? 4 : 4
              info.QuoteItem = this.QuoteItem
              info.TestItem = this.TestItem
              axios.post('/projectInformation/saveOrUpdateProject', info).then((res) => {
                if (res._STATUS == 1) {
                  let title = res._MESSAGE
                  if (type == 'save') {
                    this.$Modal.success({
                      title,
                    })
                  } else {
                    this.$router.push({
                      name: "reportReview",
                      query: {
                        ProjectId: this.$route.query.ProjectId,
                      }
                    })
                  }
                } else {
                  this.$Modal.error({
                    title:res._MESSAGE
                  })
                }
              })
            })
          }else{
            this.$Message.warning('连续点击提交时间过短，最少间隔1分钟!')
          }
        }

      },
      /* 获取当前创建项目 */
      getProject(Id) {
        this.$post('ProjectInfo.findProjectByID', {
          Id
        }).then(res => {
          this.downloadInfo = res.doc
          // // // 把复选框数据转成数组
          if(res.info.TestItem){
            this.TestItem = JSON.parse(res.info.TestItem)
          }else{
            this.TestItem = []
          }
          if(res.info.QuoteItem){
            this.QuoteItem = JSON.parse(res.info.QuoteItem)
          }else{
            this.QuoteItem = []
          }
          this.info = res.info
          localStorage.projectType = this.info.PerjectType
          this.flag = true
          this.upInfo.MonitorPlan = this.upWord(res.doc.MonitorPlan)
          this.upInfo.QuoteReport = this.upWord(res.doc.QuoteReport)
          this.upInfo.ActualTestReport = this.upWord(res.doc.ActualTestReport)
          this.upInfo.MonitorPointMap = this.upWord(res.doc.MonitorPointMap)
          this.upInfo.ActualMonitorPointMap = this.upWord(res.doc.ActualMonitorPointMap)
        }).catch(err => {
          console.log(err)
          this.$Message.error('请求失败!')
          // alert('请求崩溃')
        })
      },
      upWord(url){        //分割字符串
        if(url == null){
          return '上传'
        }else{
          var upWord = url;
          upWord = upWord.split("/");
          upWord = upWord.slice(-1);
          upWord = upWord.join('');
          // console.log(upWord)
          return upWord
        }
      }
    }
  }
</script>
<style lang="less">
  .styleInput {
    td.sizeStyle {
      font-size:12px;
    }
    textarea.ivu-input {
      font-size: 12px;
    }
    .ivu-input {
      border: none;
      text-align: center;
      height: 30px;

      input {
        outline: medium;
      }
    }
    .ivu-input[disabled], fieldset[disabled] .ivu-input {
      background-color: #fff; 
      color: #333;
      font-size: 12px;
    }
  }
</style>